<template>
    <div class="container">
        <h1>嗨购管理系统</h1>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <el-form-item prop="adminname">
                <el-input v-model="ruleForm.adminname" type="text" autocomplete="off" style="width: 350px;height: 50px;"
                    placeholder="账户名">
                    <!-- 使用 el-icon 为 SVG 图标提供属性 -->
                    <template #prefix>
                        <el-icon>
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="密码">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 350px;height: 50px;" @click="loginIn">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { doLogin } from '@/apis/login'
import { useUserStore } from '@/stores/useUser'
import router from '@/router'
const useUser = useUserStore()
const ruleFormRef = ref<FormInstance>()
//验证规则的函数（写在上面）
const validateadminname = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else {
        callback() //通过验证
    }
}
const validatePassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (!/^\d{6}$/.test(value)) {
        callback(new Error('请输入6位数字'))
    } else {
        callback() //通过验证
    }
}
//数据（响应式数据）
const ruleForm = reactive({
    adminname: '',
    password: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    adminname: [{ validator: validateadminname, trigger: 'blur' }],  // 失去焦点的时候触发前面的函数
    password: [{ validator: validatePassword, trigger: 'blur' }],
})

//登录
const loginIn = () => {
    //首先我们需要发请求获取数据的操作放在pinia中进行
   doLogin(ruleForm).then(res=>{
    console.log(res);
    
     if (res.data.code == 200) {
        console.log(res);
        useUser.changeToken(res.data.data.token)
        useUser.changeAdminid(res.data.data.adminid)
        useUser.changeRole(res.data.data.role)
        useUser.changeAdminname(res.data.data.adminname)
        useUser.changeCheckedKeys(res.data.data.checkedkeys)
        
        router.push('/home')
    }
   })
}

</script>
<style>
body {
    background-color: #001529;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 300px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

h1,
p {
    color: white;
}

.el-input__inner {
    height: 48px;
    line-height: 48px;
}
</style>